<template>
	<!-- 1. -->
	<el-container style="height: 1000px; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu :default-active="$route.path" :default-openeds="['1', '3']" router>
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-message"></i>商城管理系统</template>
					<el-menu-item-group>
						<template slot="title"></template>
						<el-menu-item index="/index">首页</el-menu-item>
						<el-menu-item index="/user">用户信息管理</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group title="主营业务">
						<el-menu-item index="/goodList">商品列表</el-menu-item>
						<el-menu-item index="/money">购物车</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

			</el-menu>
		</el-aside>
		<el-main>
			<el-table :data="tableData">
				<el-table-column prop="id" label="ID" width="210">
				</el-table-column>
				<el-table-column prop="name" label="商品名称" width="180">
				</el-table-column>
				<el-table-column prop="price" label="单价" width="180">
					<template slot-scope="scope">
						<span style="font-size: 30px;color: #555;">{{ scope.row.price }}￥</span>
					</template>
				</el-table-column>
				<el-table-column prop="number" label="数量" width="180">
				</el-table-column>
				<el-table-column prop="total" label="总价" width="180" align="center">
					<template slot-scope="scope">
						<span style="font-size: 30px;color: #555;">{{ scope.row.total }}￥</span>
					</template>
				</el-table-column>


				<el-table-column>
					<template slot-scope="scope">
						<el-button type="danger" @click="deletec(scope.row.id)" plain>删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</el-main>
	</el-container>

</template>

<script>
export default {
	data() {
		return {
			tableData: this.$store.state.moneyList,
		}
	},
	created() {
		this.getuser();
		this.getMoneyList(); //拉取商品数据
	},
	methods: {
		deletec(id) {
			this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					var url = "/api/deleteMoney?id=" + id;
					this.axios
						.get(url)
						.then((response) => {
							this.getMoneyList(); //拉取所有用户数据
							this.tableData = this.$store.state.moneyList; //把用户数据显示到表上
							// location.reload();
						})
						.catch(function (error) {


							alert("删除失败");
						});

					this.$message({
						type: "success",
						message: "删除成功!",
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},

	}
};
</script>

<style>
/* 2. */
.el-header {
	background-color: #B3C0D1;
	color: #333;
	line-height: 60px;
}

.el-carousel__item h3 {
	color: #475669;
	font-size: 14px;
	opacity: 0.75;
	line-height: 200px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
</style>